<template>
    <div class="recommend-goods-container">
      <div class="recommend-goods">
        <div v-for="item in items" :key="item.itemId" class="goods-item">
          <div class="image-container">
            <img :src="item.image" alt="" />
          </div>
          <div class="spike-icon-doing" v-if="item.seckill">秒杀中</div>
          <div class="title">{{ item.title }}</div>
          <div class="price flex f-center">
            <div class="goods-index flex f-center">{{ item.order }}</div>
            <span v-if="item.defaultPrice > 0" class="feiqi">¥{{ formatPrice(item.defaultPrice) }}</span>
            <span v-if="item.defaultPrice > 0">¥{{ formatPrice(item.defaultPrice) }}</span>
          </div>
          <button @click="navigateToDetail(item)">去购买</button>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import axios from 'axios';
  
  const loading = ref(true);
  const error = ref(null);
  const items = ref([]);
  
  async function fetchDiscountData() {
    try {
      const response = await axios.get('https://apis.netstart.cn/mogujie/live/queryDiscountPrice', {
        params: {
          roomId: '12515567',
          actorId: '19gl78g'
        }
      });
      items.value = response.data.data.itemList.map(item => ({
      ...item,
      defaultPrice: item.defaultPrice / 100,
      originalPrice: item.originalPrice / 100,
      discountPrice: item.discountPrice / 100
    }));
    } catch (error) {
      console.error('Error fetching discount data:', error);
      return null;
    }
  }
  
  onMounted(async () => {
    try {
      const response = await fetchDiscountData();
      if (response) {
        items.value = response.data.data.itemList;
      }
      loading.value = false;
    } catch (err) {
      error.value = err.message || '未知错误';
      loading.value = false;
    }
  });
  
  function navigateToDetail(item) {
    console.log('Navigate to detail for item:', item);
  }
  
  // 自定义过滤器
  const formatPrice = (price) => {
    return price.toFixed(2);
  };
  </script>
  
  <style scoped>
  .recommend-goods-container {
  display: flex;
  flex-direction: column;
  max-height: 300px; /* 根据需要调整，以适应4个商品的高度 */
  overflow-y: auto; /* 允许垂直滚动 */

}
  .recommend-goods {
    display: flex;
    flex-wrap: wrap;
  }
  
  .goods-item {
    width: 304px;
    height: 106px;
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    background-color: #222221;
  }
  
  .image-container img {
    width: 85px;
    height: 85px;
  }
  
  .image-container {
    width: 100%;
    height: 100px;
    background-size: cover;
    background-position: center;
    border-radius: 5px;
  }
  
  .spike-icon-doing {
    background-color: #fb543b;
    color: white;
    padding: 5px;
    border-radius: 5px;
    width: 42px;
    height: 13px;
    font-size: 12px;
    position: absolute;
    top: 10px;
    left: 100px;
  }
  
  .title {
    font-weight: bold;
    margin-top: 10px;
    position: absolute;
    top: 30px;
    left: 100px;
    font-size: 10px;
    color: white;
  }
  
  .price {
    margin-top: 5px;
    font-size: 18px;
    color: #ff6b6b;
    position: absolute;
    top: 80px;
    left: 100px;
    font-size: 10px;
  }
  
  button {
    background-color: #ff4466;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    position: absolute;
    top: 70px;
    left: 230px;
    height: 35px;
  }
  
  button:hover {
    background-color: #ff4d4d;
  }
  
  .goods-index {
    position: absolute;
    top: -75px;
    left: -90px;
    height: 19px;
    width: 17px;
    line-height: 17px;
    font-size: 12px;
    color: #fff;
    background-color: #413a3a;
    border-radius: 0 0 10.5px 0;
  }
  
  /* 添加横线效果 */
  .feiqi{
    text-decoration: line-through;
    position: absolute;
    top: -15rem;
    left: 0rem;
     color:#858585
  }
  </style>